<!--
 * @Description: 附加文档
 * @Author: DHL
 * @Date: 2022-06-29 20:42:18
 * @LastEditors: DHL
 * @LastEditTime: 2022-08-04 10:12:10
-->
<template>
  <div class="process-panel-tab__content">
    <el-form :model="dbForm" label-width="80px">
      <el-form-item label="元素文档" prop="documentation">
        <el-input
          v-model="dbForm.documentation"
          :rows="2"
          type="textarea"
          clearable
          @input="updateDocumentation"
          @change="updateDocumentation"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
  export default { name: 'PanelDocumentation' }
</script>

<script setup lang="ts">
  import { nextTick, reactive, watch } from 'vue'
  import { useBpmnStore } from '../../store/bpmn'

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const bpmnStore = useBpmnStore()

  const dbForm = reactive({
    documentation: ''
  })

  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          const documentations = bpmnStore.activatedElement.businessObject?.documentation
          dbForm.documentation =
            documentations && documentations.length ? documentations[0].text : ''
        })
      }
    },
    {
      immediate: true
    }
  )

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  function updateDocumentation() {
    const documentation = bpmnStore.bpmnFactory.create('bpmn:Documentation', {
      text: dbForm.documentation
    })

    bpmnStore.updateProperties({
      documentation: [documentation]
    })
  }
</script>
